<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:rich="http://richfaces.org/rich">

    <h:body>
        <ui:composition template="/template.xhtml">

            <ui:define name="body">


                <h:outputScript name="jquery.js" target="head" />

                <div id="fb-root"></div>

                <h:outputText value="#{produtoController.prepareCreate}" />

                <a4j:outputPanel id="messagePanel" layout="block">
                    <h:messages errorStyle="color: red" rendered="true" infoStyle="color: green" layout="table"/>
                </a4j:outputPanel>

                <h:form styleClass="jsfcrud_list_form" prependId="false">

                    <table style="width:100%;vertical-align: top;border:0px;">
                        <tr>
                            <td style="width:100%" colspan="2"  align="right">
                                <h:selectOneMenu style="width:150px"  immediate="true" value="#{produtoController.selected.modelo}">
                                    <f:selectItems  value="#{modeloController.itemsAvailableSelectOne}"/>
                                    <f:ajax  event="change" execute="@form" immediate="true" render="panel panelTbl table" />
                                </h:selectOneMenu>
                                <h:selectOneMenu style="width:150px"  immediate="true" value="#{produtoController.selected.colecao}">
                                    <f:selectItems   value="#{colecaoController.itemsAvailableSelectOne}"/>
                                    <f:ajax  event="change" execute="@form" immediate="true" render="panel panelTbl table" />
                                </h:selectOneMenu>
                                <h:inputHidden value="#{produtoController.selected.cor}" />
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="2" height="100%">
                                <table style="width:100%;; ">
                                    <tr>
                                        <td align="center" class="tdFiltro">
                                            <h:outputText value="Tamanho"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <h:form>
                                                <a4j:commandButton   actionListener="#{produtoController.tamanhoSelected}" value="TODOS" execute="@form" render="panel panelTbl table" style="font-size: 10px;color: #000000;display:block;width:95%;height:25px;border:1px solid #EAEAEA;background:#FFFFFF">
                                                </a4j:commandButton>
                                                <rich:dataGrid style="width:100%"  columns="3"  first="0" id="tableTamanho" value="#{tamanhoController.tamanhos}" var="tamanho" >
                                                    <a4j:commandButton actionListener="#{produtoController.tamanhoSelected}" value="#{tamanho}" execute="@form" render="panel panelTbl table" style="display:block;width:25px;height:25px;border:1px solid #EAEAEA; background: #FFFFFF; color:#000000 ">
                                                    </a4j:commandButton>
                                                </rich:dataGrid>
                                            </h:form>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tdFiltro" align="center">
                                            <h:outputText value="Cor"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="width:100%">
                                            <h:form>
                                                <a4j:commandButton   actionListener="#{produtoController.corSelected}" value="TODOS" execute="@form" render="panel panelTbl table" style="font-size: 10px;color: #000000;display:block;width:95%;height:25px;border:1px solid #EAEAEA;background:#FFFFFF">
                                                </a4j:commandButton>
                                                <rich:dataGrid style="width:100%"  columns="3"  first="0" id="tableCor" value="#{corController.cores}" var="cores" >
                                                    <a4j:commandButton  styleClass="button" actionListener="#{produtoController.corSelected}"  value="#{cores}" execute="@form" render="panel panelTbl table"  style="display:block;width:25px;height:25px;border:1px solid #EAEAEA; color: #{cores.descHexa};  background: #{cores.descHexa};">
                                                    </a4j:commandButton>
                                                </rich:dataGrid>
                                            </h:form>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width:85%" align="center">
                                <a4j:outputPanel ajaxRendered="true" id="panel"  >
                                    <h:panelGroup id="panelTbl">
                                        <f:facet name="noData" />

                                        <rich:dataGrid  style="width:100%;border:1px;" columns="3" elements="9" first="0" id="table" value="#{produtoController.produtos}" var="item" >
                                            <rich:panel styleClass="produtoContainer" style="border:1px;vertical-align: middle" >
                                                <h:panelGrid styleClass="imgProduto" columns ="1" width="175px">
                                                    <h:commandLink action="#{produtoController.prepareView}" >
                                                        <h:graphicImage styleClass="capa" rendered="true" width="175px" height="200px" value="#{item.caminhoImagem}"/>
                                                    </h:commandLink>
                                                    
                                                </h:panelGrid>
                                                <div id="#{item.idProduto}" class="titulo" style="clear: both">
                                                    <h:outputText id="prod" value="#{item.descricao} " style="font-size: 18px;font-weight: bold; text-transform: lowercase"/>
                                                </div>
                                                <div style="clear: both">
                                                    <div style="float:left" >
                                                        <h:outputText value="#{bundle.ListProdutoTitle_colecao }:" style="font-size: 10px;font-weight: bold; text-transform: uppercase; "/>
                                                         <h:outputText value=" #{item.colecao.descricao.toString()}" style="font-size: 10px;font-weight: bold; text-transform: uppercase; "/>
                                                    </div> 
                                                </div>
                                                <br />

                                                <h:panelGrid columns="2" width="50px" cellspacing="0" border="0" >
                                                    <h:outputText value="#{bundle.ListProdutoTitle_tamanho}:" style="font-size: 10px;font-weight: bold; text-transform: uppercase; "/>
                                                    <h:outputText value="#{item.tamanho.descricao}" style="font-size: 10px;font-weight: bold; text-transform: uppercase; "/>
                                                </h:panelGrid>
                                                <h:panelGrid columns="1" style="text-align: right" width="175px" cellspacing="0" border="0" >
                                                    <h:outputText value="#{item.valorUnitario}" style="font-size: 20px; color: #990000" >
                                                        <f:convertNumber pattern="R$####.00" />
                                                    </h:outputText>
                                                </h:panelGrid>
                                                <h:panelGrid columns="2" style="text-align: right" width="175px" cellspacing="0" border="0" >

                                                    <div style="text-align: left">
                                                        <img class="prodFacebook" src="/LaCruz_v2/faces/javax.faces.resource/img/facebook-icon.png" />
                                                        <img class="prodTwitter" src="/LaCruz_v2/faces/javax.faces.resource/img/Twitter-icon.png" />
                                                    </div>

                                                    
                                                    <a4j:commandLink rendered="#{userManager.authenticated}" execute="@form"   action="#{buyManager.AdicionarPedido(item.idProduto)}"  render="carrinho messagePanel" >
                                                        <h:graphicImage rendered="#{!userManager.admin}"  value="/LaCruz_v2/faces/javax.faces.resource/img/cart.png" />
                                                        <f:ajax  event="click" execute="@this" immediate="true" render=":carrinho :messagePanel" />

                                                    </a4j:commandLink>
                                                </h:panelGrid>
                                            </rich:panel>
                                            <f:facet name="footer">
                                                <rich:dataScroller for="table" maxPages="50" renderIfSinglePage="false"></rich:dataScroller>
                                            </f:facet>
                                        </rich:dataGrid>

                                    </h:panelGroup>
                                </a4j:outputPanel>

                            </td>


                        </tr>

                    </table>


                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>


</html>

